<template>
  <div class="home">
    <!-- 轮播组件 -->
    <div class="banner-container">
      <Banner />
      <!-- 搜索框 -->
      <div class="search-container">
        <el-row>
          <el-col :span="8" :offset="8">
            <el-input v-model="input" placeholder="去哪儿..."></el-input>
          </el-col>
          <el-col :span="4" style="margin-left: 5px;">
            <el-button type="primary" icon="el-icon-search"></el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 热门博客 -->
    <div class="section">
      <div class="wrapper">
        <div class="title">热门博客</div>
        <div class="hot-blogs">
          <el-row>
            <el-col :span="6" :gutter="20" v-for="item in hotBlogList" :key="item.bid" @click.native="goBlog(item.bid)">
              <SmallCard :blog="item"/>
            </el-col>
          </el-row>
        </div>
        <!-- <div class="hot-blogs">
          <el-row :gutter="20">
            <el-col :span="6">
              <SmallCard />
            </el-col>
            <el-col :span="6">
              <SmallCard />
            </el-col>
            <el-col :span="6">
              <SmallCard />
            </el-col>
            <el-col :span="6">
              <SmallCard />
            </el-col>
          </el-row>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import Banner from '@/views/home/banner/index.vue'
import SmallCard from '@/components/common/Smallcard.vue'
import { getHotBlogList } from '@/api/blog'

export default {
  name: 'HomeView',
  components: {
    Banner,
    SmallCard
  },
  created() {
    this.getblogList()
  },
  data() {
    return {
      input: '',
      hotBlogList: []
    }
  },
  methods: {
    async getblogList() {
      let res = await getHotBlogList()
      if (res.code === 200) {
        const { hotBlogs } = res.data
        this.hotBlogList = hotBlogs
        console.log(this.hotBlogList)
      } else {
        console.log('查询失败');
      }
    },
    goBlog(bid) {
      // 路由跳转，并携带参数
      console.log('路由提奥转')
      this.$router.push({
        name: 'blog',
        params: {
          bid: bid
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>
.home {
  .banner-container {
    position: relative;

    .search-container {
      position: absolute;
      width: 100%;
      top: 50%;
      z-index: 999;

      /deep/ .el-input__inner {
        height: 46px;
        border-color: #ffd04b;
      }

      .el-button {
        height: 46px;
      }

      .el-button--primary {
        background-color: #ffd04b;
        border-color: #ffd04b;
      }
    }
  }

  .section {
    padding: 20px 0;
    min-width: 1160px;

    .wrapper {
      margin: 0 auto;
      width: 1160px;

      .hot-blogs {
        margin-top: 20px;
      }

      .title {
        height: 74px;
        color: #636363;
        text-align: center;
        font: 36px/74px Hiragino Sans GB, Microsoft YaHei, SimHei, SimSun, sans-serif;
      }
    }

  }
}
</style>
